<template>
  <div class="box">
    <header>
      <van-nav-bar
      @click-right="$router.push('/cart')"
      >
        <div slot="left">
          <img src="@/assets/kefu.png" alt="">
        </div>
        <van-search placeholder="搜索" slot="title" left-icon="" background="#00CC99"  shape="round" @click="$router.push('/search')"/>
        <div slot="right">
          <img src="@/assets/cailanzi.png" alt="">
        </div>
      </van-nav-bar>
    </header>
    <section>
          <div class="banner" style="height: 160px">
             <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item of bannerlist" :key="item.bannerId">
              <van-image
                lazy-load
                :src="item.img"
              />
                <!-- src="https://dummyimage.com/374x150/dc79f2/fff.png&text=cgmhkrjgh" -->
            </van-swipe-item>
          </van-swipe>
          </div>
      <Nav />
      <Newshop :newshoplist="newshoplist"></Newshop>
      <Prolist :prolist="prolist"></Prolist>
    </section>
  </div>
</template>

<script>
import { getProlist, getBanner } from '@/api'
import Vue from 'vue'
import Nav from '@/components/nav'
import Newshop from '@/components/newshop'
import Prolist from '@/components/prolist'
import { Swipe, SwipeItem, Lazyload, NavBar, Search, Image } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(NavBar)
Vue.use(Search)
Vue.use(Image)
export default {
  components: {
    Nav,
    Newshop,
    Prolist
  },
  data () {
    return {
      bannerlist: [],
      newshoplist: [],
      prolist: []
    }
  },
  mounted () {
    getBanner().then(res => {
      // console.log(res.data.data)
      this.bannerlist = res.data.data
    })
    getProlist().then(res => {
      this.prolist = res.data.data
      // console.log(this.prolist)
      const arr = res.data.data.filter((item) => item.isNew === 1)
      this.newshoplist = arr
      // console.log(this.newshoplist)
    })
  },
  methods: {}
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .my-swipe{
    transform: translateZ(0);
  }
.van-nav-bar{
  background-color: #00CC99;
  width: 100%;
}
.van-search{
  padding: 8px 15px;
}
.van-nav-bar__title{
  min-width: 80%;
}
.van-field__control{
  text-align: center;
  font-size: 12.5px;
}
.van-field__body{
  line-height: 20px;
}
</style>
